<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网站名（产品名）-网站介绍</title>
</head>

<body>
    
    骨架
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <title>网页显示标题</title>
        </head>
        <body>
            网页内容
        </body>
        </html>
    文本标签
        标题标签
            <h1>标题标签h1-h6</h1>
        水平线
            <hr />
        换行标签
            <br />
        段落标签
            <p></p>
        短引用标签    
            <q>周围用“”包围</q>
        长引用标签
            <blockquote>会进行整体的缩进处理</blockquote>
        用于缩略词的
            <abbr title="world health organization">WHO</abbr>

    文本格式    
        <strong>加粗</strong>
        <b>加粗</b>
        <em>倾斜</em>
        <i>倾斜</i>
        <del>删除线</del>
        <ins>下划线</ins>
    盒子
        <div>盒子标签，单独占一行</div>
        <span>跨距，一行可以放多个</span>
    
    图像标签
        <img src="图片文件名（放到同一文件夹）" alt=""  title="" />
        <!-- alt=" " 替换文本，图像显示不出来时用文字替代 -->
        <!-- title=" " 提示文本，鼠标放到图片上提示文字 -->
        <!-- width=" " 图像宽度 -->
        <!-- height=" " 图像高度(高度和宽度设置一个就好了另一个等比缩放) -->
        <!-- border=" " 设置边框粗细  -->
        属性之间不分前后顺序 采取格式 属性="属性值"
        
        图片使用路径(相对于HTML文件)相对路径
        同一级路径  无
        下一级路径  <img src="imges/img.jpg" />
        上一级路径  <img src="../img.jpg" />
        绝对路径 <img src="图片网络地址" />

        定义图像地图
            <map name="">
                定义图中可以点击的区域
                <area shape="" coords="" href="" alt="" target="_blank" />
                coords 坐标值   矩形定义四个点，圆形定义起始x,y，直径
                shape  default
                       rect       矩形
                       circle     圆形
                       poly
                <!-- area 元素总是嵌套在 <map> 标签中。 -->
            </map>

    链接标签
        超链接标签 
            <a href="https://www.  "  target="目标窗口的弹出方式">文本或图像名</a>
            <!-- target 打开窗口的方式 
                默认的值是_self 当前窗口打开页面（替代）
                _blank 新窗口打开页面 -->
                <a href="javascript:;"></a>阻止链接跳转
        
        内部链接
            <a href="内部链接html文件" target="_blank">链接名</a>
        空连接
            <a href="#" target="_blank">空连接</a>
            <!-- #表示空连接 -->
        下载链接
            <a href="下载路径" target="_blank">下载链接名</a>
            <!-- 下载链接以 压缩包zip .exe -->
        网页元素的链接
            <a href="链接路径" target="_blank"><img src="图片路径" /></a>
        锚点链接（点链接可快速跳达某个位置）
            在链接文本的href属性中，设置属性值为#名字的形式<a href="#two">第二集</a>
            找到跳转位置标签设置属性 <h4 id="two">第二集介绍</h4>       
    
    注释标签
        <!-- 注释标签 -->快捷键 CTRL + /
       条件注释，只有在ie8执行的标签 
        <!--[if IE 8]>
        .... some HTML here ....
        <![endif]-->
    特殊字符
        空格     &nbsp;
        大于号   &gt;
        小于号   &lt;
        <!-- 其余用到查阅 -->

    表格标签（展示数据）
        <table border="1">
            <tr>
                <th>表头单元格</th>
                <td> </td>
            </tr>
        </table>
        <!-- table是定义表格的标签 -->
        <!-- tr定义表格中的行（必须嵌套table标签中） -->
        <!-- td定义表格中的单元格（必须嵌套tr标签中） -->
        <!-- td指单元数据的内容  -->
        <!-- th表头单元格（居中加粗） -->
        不定义边框属性，表格不显示(border)
        <table border="1">
            <thead>
                表头区域
                <tr>
                    <th>表头单元格</th>
                </tr>
            </thead>
            <tbody>
                表格主体
                 <tr>
                    <td></td>
                </tr>
            </tbody>
        </table>    
        <!-- thead表格头部区域（内部必须拥有tr标签） -->
        <!-- tbody表格主体区域 -->
    合并单元格
            <tr>
                <td colspan="跨多少个">
                </td>
            </tr>
            <!-- rowspan="-->合并单元格的格数"（跨行）（最上侧单元格为目标单元格）
            <!-- colspan="-->合并单元格格数"（跨列） （最左侧单元格为目标单元格）
            <!-- 记得删除多余的单元格 -->

    列表标签
        无序列表
            <ul>
                <li>列表项</li>
                <li>列表项</li>
            </ul>
        <!-- ul里面只能放li标签 -->
        <!-- li里面可容纳所有元素 -->
        list-style: none;去掉无序列表前的项目符号
        自定义列表
            <dl>
                <dt>名词</dt>
                <dd>名词解释1</dd>
                <dd>名词解释2</dd>
                <dd>名词解释3</dd>
            </dl>
            经常用于对术语或名词描述解释
            <!-- dt和dd里面可放任何标签 -->
        有序列表
            <ol>
                <li>列表项</li>
            </ol>
        <!-- 有序列表有一定顺序 -->
        <!-- ol里面只能放li标签 -->
        <!-- li里面可容纳所有元素 -->
    
    表单标签
        <!-- 表单域，表单控件，提示信息 -->
        表单域
            <form action="url地址" method="提交方式" name="表单域名称">
                各种表单元素控件
            </form>
             action=" " 用于指定接受并处理表单数据的服务器程序的url地址 
             method=" "  设置表单数据的提交方式 取值为get/post 
                        <!--  get适合少量数据的提交，浏览器会设定容量限制，页面地址栏中可见
                              post安全性更佳，页面地址栏中被提交的数据不可见 -->
             name=" "    指定表单的名称以区分多个表单域 
        表单控件
            <input type="" name="" value="" checked="checked" maxlength="">
            输入表单元素 用于收集用户信息
                type属性
                    button   定义可点击按钮
                    checkbox 定义复选框，可以多选（打勾）
                    file     定义输入字段和浏览按钮，供文本上传
                    hidden   定义隐藏的输入字段
                    image    定义图像形式的提交按钮
                    password 定义密码字段，字段被掩码
                    radio    定义单选按钮，实现多选一
                    <!-- 必须使用同一name值才能实现多选一 -->
                    reset    定义重置按钮，清除表单数据
                    submit   定义提交按钮，把表单数据发送到服务器
                    text     定义单行的输入字段可在其中输入文本，默认宽度为20字符
                    number   包含数字值的输入字段，可以通过设置min max 对数字做出限制
                 name 
                    定义input元素的名称
                 value 
                    规定input输入元素的值
                   
                    <!-- 只在文本输入框看到效果,用于按钮可修改按钮名字 -->
                    <!-- value name 针对于后台人员使用 -->
                checked
                    规定input元素首次加载时应当被选中
                    <!-- 主要针对单选按钮和复选框 -->
                maxlength
                    限定输入字段的最大长度   
                min max 属性规定input元素的最小值和最大值

            label标签
                <intput type="" .....id="名词">
                    <label for="名词"></label> <!--for id属性相同-->
                </intput>
                绑定表单元素点击标签内文本是，自动将光标转到对应表单元素上

            下拉表单标签
                <select>
                    <option>选项</option>
                    <option>选项</option>
                </select>
                <!-- 在<option>中定义 selected= "selected"当前为默认选项 -->
             
            文本域
                <textarea>文本内容（默认文本框中文字）</textarea>
                文本域放同一行，不然会有空格产生
                <!-- 大量文本输入，留言，反馈时使用 -->
    Emmet语法
        直接输入标签名，按tab键即可
        生成多个标签名 div*3 生成三个div
        父子级关系，ul>li 用>
        兄弟级关系  div+p 用+
        想带有类名或者id名字，标签名.类名  标签名#id名
        $符号 从1开始自增 div.类名$*3
        {}输入文字 div{wenben}*5
    
    HTML5提高
        有语义化的标签
            <header>头部标签</header>
            <nav>导航标签</nav>
            <article>内容标签</article>
            <section>定义文档某个区域</section>
            <aside>侧边栏标签</aside>
            <footer>尾部标签</footer>

        多媒体标签
            <audio src="文件地址">音频标签</audio>
                <!-- 只支持三种格式，通用mp3 -->
                autoplay="autoplay" 自动播放谷歌禁用2
                controls="controls" 播放控件
                loop="loop"         循环播放

            <video src="文件地址" controls="controls" >视频标签</video>
                <!-- 只支持三种视频格式尽量使用mp4格式的 -->

                autoplay="autoplay"  视频自动播放<!-- 谷歌浏览器增加 muted="muted"解决禁用自动播放问题 -->
                controls="controls"  向用户显示播放控件 <!-- 播放按钮，暂停按钮 -->
                width     设置播放器宽度
                height    设置播放器高度
                loop="loop"       播放完是否循环播放
                preload="auto"    是否预加载视频
                       ="none"    (有了autoplay 则忽略该属性)
                poster="# "       等待加载的画面图片
                muted     静音播放

        新增input 
                type属性
                <!-- 必须添加form表单域 -->
                    email   限制输入必须为Email
                    url     限制输入必须为URL网址
                    date    限制输入必须为日期
                    time    限制输入必须为时间
                    month   限制输入必须为月
                    week    限制输入必须为周
                    number  限制输入必须为数字（验证码，商品数量）
                    tel     限制输入必须为手机号码
                    search  限制输入必须为搜索框
                    color   生成颜色选择框
                datalist属性
                    配合input list使用
                    <input list="browsers">
                    <datalist id="browsers">
                        <option value="c"></option>
                        <option value="x"></option>
                    </datalist>
                新增表单 属性
                    readonly="readonly"   输入字段只读不能修改配合value使用
                    disable="disable"     输入字段禁用，不可点击，禁用元素不会被提交
                    *required= "required"       表单内容不能为空
                    placeholder= "提示的文本"   提示文本（搜索栏默认字）
                    autofocus= "autofocus"     自动获得焦点（光标自动点击输入框）
                    autocomplete= "on（默认）/off"     输入过的值显示在填写选项（搜索记录/填写记录） <!-- 选择off -->
                    multiple= "multiple"       可以多选文件提交
                    step=" "    合法数字间隔
        base
            <base href="">在head元素内部，
            为页面上的所有链接规定默认地址或者默认目标

            取消表单获得光标后变粗
            input{
                outline:none;}

网页制作
    制作favicon网站标题小图标
        生成png格式的图片，在比特虫转换成 favicon.ico 文件放置根目录下
        <link rel="shortcut icon" href=" /favicon.ico" /> 引入
    
    网站TDK三大标签
        T: <title>网站名（产品名）-网站介绍</title>
        D: <meta name="description" content="京东jd.com-专业的综合网上购物商城，销售家电，数码通讯，电脑，家居百货，服装..."/>
        <!-- 简要说明网站时做什么的 -->
        K：keyword 页面关键词（6-8个关键词）
            <meta name="keywords" content="网上购物，网上商城，手机，笔记本mp3...">
    
    Logo seo优化
        logo里面先放一个<h1></h1>标签进行提权，告诉搜索引擎这个地方很重要
        <h1></h1>里面再放一个链接可以返回首页
        为了搜索引擎收录我们，我们链接里要放文字（网站名字，但是不要显示出来）
                    1.文字大小为0   {
                                     font-size: 0;
                                    }
                    2.文字移到盒子外面再溢出隐藏
                    {
                        text-indent: -99999px; overflow: hidden;
                       }
        最后给一个title属性，鼠标放上去看得到logo的文字提示

移动端
    视口
        视觉视口 visual viewport
        布局视口 layout viewport
        *理想视口 ideal viewpor
            meta 视口标签
                <meta name="viewport" content="width=device-width（宽度设置为可视宽度） user-scalable=no （用户是否可以缩放）,
                initial-scale=1.0（初始缩放比）, maximum-scale=1.0（最大缩放比）, minimum-scale=1.0（最小缩放比）">
                <!-- 标准写法 -->


    </body>             
</html> 
